<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carbon Reduction Records - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  
  <!-- CDN References -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  
  <!-- SF Pro font -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  
  <!-- Custom CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="./css/index.css">
  
  <!-- JavaScript libraries -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>
  
  <style>
    :root {
      --card-bg-light: rgba(255, 255, 255, 0.8);
      --card-bg-dark: rgba(44, 44, 46, 0.8);
      --text-color-light: #000;
      --text-color-dark: #FFFFFF;
      --records-gradient-start: var(--ios-green);
      --records-gradient-end: var(--ios-teal);
      --animation-timing-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    body {
      background-color: var(--ios-secondary-system-background, #F2F2F7);
      color: var(--text-color-light);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      position: relative;
      min-height: 100vh;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Frosted glass background effect */
    .frosted-glass {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.05);
    }
    
    /* Add ambient glow effects */
    .glow-effect {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      filter: blur(50px);
      z-index: -1;
      opacity: 0.5;
      animation: pulse 8s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .glow-green {
      top: 10%;
      right: 10%;
      background: radial-gradient(circle, rgba(52, 199, 89, 0.2), transparent 70%);
    }
    
    .glow-teal {
      bottom: 10%;
      left: 5%;
      background: radial-gradient(circle, rgba(48, 176, 199, 0.15), transparent 70%);
      animation-delay: 2s;
    }
    
    @keyframes pulse {
      0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
      50% { transform: scale(1.05) translate(20px, -10px); opacity: 0.7; }
      100% { transform: scale(1) translate(0, 0); opacity: 0.5; }
    }
    
    .records-header {
      background: linear-gradient(135deg, var(--records-gradient-start), var(--records-gradient-end));
      color: white;
      padding: 120px 0 60px;
      text-align: center;
      border-radius: 0 0 24px 24px;
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }
    
    /* Add shimmer effect */
    .records-header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
      transform: rotate(30deg);
      animation: shimmer 10s infinite linear;
      pointer-events: none;
    }
    
    @keyframes shimmer {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(0%) rotate(360deg); }
    }
    
    .records-header h1 {
      font-weight: 700;
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }
    
    .records-header p {
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
      font-size: 1.1rem;
      position: relative;
      z-index: 2;
    }
    
    .user-info {
      background-color: var(--card-bg-light);
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: transform 0.3s var(--animation-timing-apple),
                box-shadow 0.3s var(--animation-timing-apple);
    }
    
    .user-info:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }
    
    .user-info-label {
      font-weight: 700;
      margin-right: 8px;
      color: var(--ios-label);
    }
    
    .user-info-value {
      font-weight: 600;
      color: var(--ios-blue);
      padding: 6px 12px;
      background-color: rgba(0, 122, 255, 0.1);
      border-radius: 8px;
    }
    
    .record-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      margin-bottom: 30px;
      transition: transform 0.4s var(--animation-timing-apple),
                  box-shadow 0.4s var(--animation-timing-apple);
      height: 100%;
      background-color: var(--card-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .record-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    }
    
    .record-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.4s var(--animation-timing-apple);
    }
    
    .record-card:hover .record-img {
      transform: scale(1.03);
    }
    
    .record-body {
      padding: 24px;
    }
    
    .record-title {
      font-weight: 700;
      margin-bottom: 12px;
      font-size: 1.3rem;
      background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .record-row {
      display: flex;
      margin-bottom: 8px;
      align-items: center;
    }
    
    .record-label {
      font-weight: 600;
      color: var(--ios-gray);
      width: 100px;
      flex-shrink: 0;
    }
    
    .record-value {
      flex-grow: 1;
      word-break: break-word;
    }
    
    .auth-status {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 12px;
      color: white;
      font-weight: 700;
      text-align: center;
      width: 100%;
      margin-top: 16px;
      transition: all 0.3s var(--animation-timing-apple);
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .auth-yes {
      background: linear-gradient(135deg, var(--ios-green), var(--ios-teal));
    }

    .auth-no {
      background: linear-gradient(135deg, var(--ios-red), var(--ios-pink));
    }

    .auth-non {
      background: linear-gradient(135deg, var(--ios-orange), var(--ios-yellow));
    }
    
    /* Add shine effect to auth-status */
    .auth-status::before {
      content: '';
      position: absolute;
      top: -180%;
      left: -50%;
      width: 200%;
      height: 200%;
      opacity: 0;
      transform: rotate(30deg);
      background: rgba(255, 255, 255, 0.13);
      background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
      );
    }
    
    .auth-status:hover::before {
      opacity: 1;
      animation: shine 1.5s var(--animation-timing-apple);
    }
    
    @keyframes shine {
      to {
        transform: translateX(250%);
      }
    }
    
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }
    
    .loader {
      width: 48px;
      height: 48px;
      border: 5px solid var(--ios-gray-light);
      border-bottom-color: var(--ios-blue);
      border-radius: 50%;
      animation: rotation 1s linear infinite;
      margin-bottom: 16px;
    }
    
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .section-title {
      font-weight: 700;
      margin-bottom: 24px;
      position: relative;
      padding-bottom: 12px;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(to right, var(--ios-green), var(--ios-teal));
      border-radius: 2px;
    }
    
    /* Empty state message */
    .empty-state {
      text-align: center;
      padding: 60px 0;
      color: var(--ios-gray);
    }
    
    .empty-state i {
      font-size: 48px;
      margin-bottom: 20px;
      color: var(--ios-green);
      opacity: 0.6;
    }
    
    .empty-state h3 {
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--ios-label);
    }
    
    /* Theme toggle button */
    .theme-toggle {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background: var(--ios-system-background);
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .theme-toggle:hover {
      transform: scale(1.05);
    }
    
    .theme-toggle i {
      font-size: 24px;
      color: var(--ios-gray);
    }
    
    /* Animation classes */
    .fade-in-up {
      animation: fadeInUp 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    /* Dark mode adaptations */
    @media (prefers-color-scheme: dark) {
      body.auto-theme {
        background-color: #1C1C1E;
        color: var(--text-color-dark);
      }
      
      body.auto-theme .record-card,
      body.auto-theme .user-info {
        background-color: var(--card-bg-dark);
      }
      
      body.auto-theme .user-info-label {
        color: #AEAEB2;
      }
      
      body.auto-theme .user-info-value {
        color: #64D2FF;
        background-color: rgba(10, 132, 255, 0.2);
      }
      
      body.auto-theme .record-title {
        background: linear-gradient(135deg, #64D2FF, #5E5CE6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      body.auto-theme .record-label {
        color: #8E8E93;
      }
      
      body.auto-theme .record-value {
        color: #FFFFFF;
      }
      
      body.auto-theme .theme-toggle {
        background-color: rgba(44, 44, 46, 0.8);
      }
      
      body.auto-theme .theme-toggle i {
        color: #AEAEB2;
      }
      
      body.auto-theme .empty-state i {
        color: #30D158;
      }
      
      body.auto-theme .empty-state h3 {
        color: #FFFFFF;
      }
      
      body.auto-theme .section-title {
        color: #FFFFFF;
      }
      
      body.auto-theme p {
        color: rgba(255, 255, 255, 0.8);
      }
      
      body.auto-theme .loading-container {
        color: #FFFFFF;
      }
      
      body.auto-theme .loader {
        border-color: rgba(255, 255, 255, 0.2);
        border-bottom-color: #64D2FF;
      }
    }
    
    /* Manual theme classes */
    body.dark-theme {
      background-color: #1C1C1E;
      color: var(--text-color-dark);
    }
    
    body.dark-theme .record-card,
    body.dark-theme .user-info {
      background-color: var(--card-bg-dark);
    }
    
    body.dark-theme .user-info-label {
      color: #AEAEB2;
    }
    
    body.dark-theme .user-info-value {
      color: #64D2FF;
      background-color: rgba(10, 132, 255, 0.2);
    }
    
    body.dark-theme .record-title {
      background: linear-gradient(135deg, #64D2FF, #5E5CE6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    body.dark-theme .record-label {
      color: #8E8E93;
    }
    
    body.dark-theme .record-value {
      color: #FFFFFF;
    }
    
    body.dark-theme .theme-toggle {
      background-color: rgba(44, 44, 46, 0.8);
    }
    
    body.dark-theme .theme-toggle i {
      color: #AEAEB2;
    }
    
    body.dark-theme .empty-state i {
      color: #30D158;
    }
    
    body.dark-theme .empty-state h3 {
      color: #FFFFFF;
    }
    
    body.dark-theme .section-title {
      color: #FFFFFF;
    }
    
    body.dark-theme p {
      color: rgba(255, 255, 255, 0.8);
    }
    
    body.dark-theme .loading-container {
      color: #FFFFFF;
    }
    
    body.dark-theme .loader {
      border-color: rgba(255, 255, 255, 0.2);
      border-bottom-color: #64D2FF;
    }
    
    body.light-theme {
      background-color: #F2F2F7;
      color: var(--text-color-light);
    }
  </style>
</head>
<body class="auto-theme">
<!-- Add frosted glass background -->
<div class="frosted-glass"></div>

<!-- Add ambient glow effects -->
<div class="glow-effect glow-green"></div>
<div class="glow-effect glow-teal"></div>

<div id="loading" class="loading-container fade-in-up">
  <div class="loader"></div>
  <p>Loading records...</p>
</div>

<!-- 导航栏容器，将由JavaScript加载 -->
<div id="navbar-container"></div>

<header class="records-header">
  <div class="container">
    <h1 class="fade-in-up">Carbon Reduction Records</h1>
    <p class="fade-in-up delay-1">View and manage carbon accounting records for verification and approval</p>
  </div>
</header>

<div class="container">
  <div class="user-info ios-depth-effect fade-in-up delay-2">
    <div class="user-info-label">Current User:</div>
    <div class="user-info-value" id="username">Loading...</div>
  </div>
  
  <h2 class="section-title fade-in-up delay-2">Carbon Reduction Submissions</h2>
  <div id="records" class="row">
    <!-- 交易记录将在这里动态生成 -->
  </div>
</div>

<!-- Theme toggle button placeholder -->

<!-- Footer -->
<div id="footer-placeholder"></div>

<script>
  $(document).ready(function () {
    // Fetch records
    fetchTransactions();

    // ----- START: Theme Toggling Logic -----
    const savedTheme = localStorage.getItem('theme');
    const body = document.body;

    function applyTheme(theme) {
        body.className = theme; // Replace all classes
        updateThemeIcon(theme);
        localStorage.setItem('theme', theme);
    }

    if (savedTheme) {
        applyTheme(savedTheme);
    } else {
        body.classList.add('auto-theme'); // Start with auto
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
        }
        updateThemeIcon('auto-theme'); // Update icon based on initial auto state
    }
    
    // Listen for system theme changes
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
      if (body.classList.contains('auto-theme')) {
        if (e.matches) {
          body.classList.add('dark-mode');
        } else {
          body.classList.remove('dark-mode');
        }
        updateThemeIcon('auto-theme'); // Update icon for auto theme change
      }
    });
    
    // Create and add theme toggle button
    const themeToggle = document.createElement('div');
    themeToggle.className = 'theme-toggle';
    themeToggle.id = 'themeToggle';
    themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; // Default icon
    document.body.appendChild(themeToggle);
    updateThemeIcon(body.className || 'auto-theme'); // Set initial icon correctly

    // Add click listener for theme toggle
    themeToggle.addEventListener('click', function() {
      let nextTheme;
      if (body.classList.contains('auto-theme')) {
          nextTheme = 'dark-theme';
          body.classList.remove('dark-mode'); // Ensure dark-mode is removed when switching from auto
      } else if (body.classList.contains('dark-theme')) {
          nextTheme = 'light-theme';
      } else { // Must be light-theme
          nextTheme = 'auto-theme';
          // Re-apply dark-mode class if system prefers dark when switching back to auto
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
              body.classList.add('dark-mode');
          }
      }
      applyTheme(nextTheme);
    });
    
    // Function to update the theme icon
    function updateThemeIcon(theme) {
        const icon = document.querySelector('#themeToggle i');
        if (!icon) return;
        
        if (theme.includes('dark-theme')) {
          icon.className = 'fas fa-sun'; // Show sun in dark mode
        } else if (theme.includes('light-theme')) {
          icon.className = 'fas fa-moon'; // Show moon in light mode
        } else { // Auto theme
          // Show the icon corresponding to the CURRENTLY DETECTED system theme
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            icon.className = 'fas fa-sun'; // System is dark, show sun
          } else {
            icon.className = 'fas fa-moon'; // System is light, show moon
          }
        }
      }
      // ----- END: Theme Toggling Logic -----

  }); // End of document ready

  function fetchTransactions() {
    var token = localStorage.getItem('token');
    if (!token) {
      showAlert('请先登录', 'warning', function() {
        window.location.href = 'index.html';
      });
      return; // 如果没有token，停止执行
    }
    
    $('#username').text(localStorage.getItem('username'));
    $('#loading').show(); // 显示加载动画
    
    $.ajax({
      type: 'POST',
      data: { token: token },
      url: 'getpthis.php',
      dataType: 'json',
      success: function (response) {
        $('#loading').hide(); // 隐藏加载动画
        
        if (response.success) {
          const recordsContainer = $('#records');
          
          // 使用sort方法和比较函数对数组进行排序
          response.data.sort(function (a, b) {
            return a.id - b.id; // 升序排序
          });
          
          if (response.data.length === 0) {
            recordsContainer.html(`
              <div class="col-12 empty-state fade-in-up delay-3">
                <i class="fas fa-leaf"></i>
                <h3>No Records Found</h3>
                <p>You haven't submitted any carbon reduction records yet.</p>
              </div>
            `);
            return;
          }
          
          // 添加动画效果的类
          var animationClasses = ['fade-in-up delay-3', 'fade-in-up delay-4', 'fade-in-up delay-5'];
          
          response.data.forEach((record, index) => {
            const authClass = getAuthClass(record.auth);
            const authStatus = getAuthStatus(record.auth);
            
            // 处理笔记信息（如果为空则显示"无"）
            const notes = record.notes ? record.notes : 'No notes provided';
            
            // 处理活动日期（如果为空则显示记录创建时间）
            const activityDate = record.activity_date ? record.activity_date : record.time.split(' ')[0];
            
            // 轮换使用动画类
            var animationClass = animationClasses[index % animationClasses.length];
            
            const card = `
              <div class="col-md-4 mb-4">
                <div class="record-card ios-hover-effect ${animationClass}">
                  <img class="record-img" src="${record.img}" alt="Record Image">
                  <div class="record-body">
                    <h3 class="record-title">${record.username}</h3>
                    
                    <div class="record-row">
                      <div class="record-label">ID:</div>
                      <div class="record-value">${record.id}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Email:</div>
                      <div class="record-value">${record.email}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Time:</div>
                      <div class="record-value">${record.time}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Activity Date:</div>
                      <div class="record-value">${activityDate}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Points:</div>
                      <div class="record-value">${record.points}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Raw Data:</div>
                      <div class="record-value">${record.raw}</div>
                    </div>
                    
                    <div class="record-row">
                      <div class="record-label">Activity:</div>
                      <div class="record-value">${record.act}</div>
                        </div>
                    
                    <div class="record-row">
                      <div class="record-label">Notes:</div>
                      <div class="record-value">${notes}</div>
                    </div>
                    
                    <div class="auth-status ${authClass}">${authStatus}</div>
                    </div>
                </div>
              </div>
            `;
            
            recordsContainer.append(card);
          });
        } else {
          // 处理错误消息
          showAlert('错误: ' + response.message, 'error');
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
        $('#loading').hide(); // 隐藏加载动画
        console.error('AJAX error: ' + textStatus + ' - ' + errorThrown);
        showAlert('请求失败: ' + textStatus, 'error');
      },
    });
  }

  function getAuthClass(auth) {
    switch (auth) {
      case 'yes':
        return 'auth-yes';
      case 'no':
        return 'auth-no';
      case 'non':
        return 'auth-non';
      default:
        return '';
    }
  }

  function getAuthStatus(auth) {
    switch (auth) {
      case 'yes':
        return 'Approved';
      case 'no':
        return 'Rejected';
      case 'non':
        return 'Pending Review';
      default:
        return 'Unknown Status';
    }
  }
</script>
</body>
</html>
